<template>
  <div>
    <div class="button-group">
      <el-button type="primary" size="mini" @click="toAdd">添加</el-button>
    </div>
    <!-- 数据表格 -->
    <div class="data-table">
      <template>
        <el-table
          :data="linkList"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="linkId" label="编 号" width="180" v-if="show">
          </el-table-column>
          <el-table-column prop="linkName" label="名 称" width="180">
          </el-table-column>
          <el-table-column prop="linkUrl" label="地 址">
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                :href="scope.row.linkUrl"
                >{{ scope.row.linkUrl }}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column prop="createdTime" label="创 建 时 间">
          </el-table-column>
          <el-table-column prop="updateTime" label="修 改 时 间">
          </el-table-column>
          <el-table-column label="操 作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="toUpdate(scope.row.linkId)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="deleteById(scope.row.linkId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 数据表格结束 -->

    <!-- 添加弹窗 -->
    <el-dialog title="添加" :visible.sync="addDialog" width="30%">
      <link-add v-if="addDialog" @after="getList" @closeDialog="closeDialog" />
    </el-dialog>
    <!-- 添加弹窗结束 -->

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑" :visible.sync="updateDialog" width="30%">
      <link-update
        v-if="updateDialog"
        :activeId="activeId"
        @after="getList"
        @closeDialog="closeDialog"
      />
    </el-dialog>
    <!-- 编辑弹窗结束 -->
  </div>
</template>

<script>
import { list, deleteById } from "@/api/link";
import linkAdd from "./link-add";
import linkUpdate from "./link-update";

export default {
  components: {
    linkAdd,
    linkUpdate,
  },
  data() {
    return {
      // 友链列表
      linkList: [],
      // 控制添加弹窗显示
      addDialog: false,
      // 控制修改弹窗显示
      updateDialog: false,
      // 当前点击的ID
      activeId: null,
      // 隐藏编号
      show: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询列表
    getList() {
      list().then((res) => {
        this.linkList = res.data;
      });
    },
    // 根据id删除
    deleteById(id) {
      this.$confirm("此操作将永久删除该友链, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      });
    },
    // 打开添加弹窗
    toAdd() {
      this.addDialog = true;
    },
    // 关闭弹窗
    closeDialog() {
      this.addDialog = false;
      this.updateDialog = false;
    },
    // 打开修改弹窗
    toUpdate(id) {
      this.updateDialog = true;
      this.activeId = id;
    },
  },
};
</script>

<style>
</style>